{extend name="public/common"}

{block name="style"}
<title>公司发文详情</title>
<link rel="stylesheet" href="/home/css/news/detail.css?v={$Think.config.version}">
<style>
    .mb-0 {
        margin-bottom: 0;
    }
</style>
{/block}

{block name="body"}
<div id="app" v-cloak>
    <div class="header">
        <p class="title">{{detail.title}}</p>
        <p class="publisher">
            <span>{{detail.publisher}}</span>
            <span class="view">{{detail.views}} <i>{{detail.create_time | timeToString('ymd')}}</i></span>
        </p>
    </div>
    <div class="body">
        <div class="article" v-html="resizeImage" ref="article"></div>
    </div>
    <div class="comment-box mb-0">
        <p>已有{{detail.browser_user.length}}人查看</p>
        <div class="user-list">
            <div v-for="item in detail.browser_user">
                <div class="img-box">
                    <img :src="item.header?item.header:'/home/images/common/default.png'" />
                </div>
                <p>{{item.username}}</p>
            </div>
        </div>
    </div>
    <div class="comment-box">
        <p>总共{{detail.comments}}条评论</p>
        <ul class="list" infinite-scroll-immediate-check =false v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
            <li v-for="(item,index) in detail.comment">
                <div class="img-box">
                    <img :src="item.header" />
                </div>
                <div class="content">
                    <p class="name">
                        <span>{{item.nickname?item.nickname:'匿名用户'}}</span>
                        <span :class="item.is_like==0?'no-like':'like'" @click="commentLike(item)"  v-if="visit == 0">{{item.likes}}</span>
                    </p>
                    <p class="comment">{{item.content}}</p>
                    <p class="time">
                        <span>{{item.create_time | timeToString('ymdhi')}}</span>
                        <span class="delete"  v-if="userId == item.uid" @click="deleteComment(item.id,index)"></span>
                    </p>
                </div>
            </li>
        </ul>
        <div class="loading-more" v-if="detail.comment.length >= 8">
            <div v-if="loadOver && detail.comment.length >= 8">没有更多了</div>
            <div v-else  v-show="loading" >
                <mt-spinner :type="3" color="#999"></mt-spinner>
                正在加载中...
            </div>
        </div>
    </div>
    <div class="foot" v-show="!sendBoxValid" v-if="visit == 0">
        <div class="input-box" @click="clickSendBox">
            请输入评论内容
        </div>
        <div class="collect" @click="collect(detail)">
            <img src="/home/images/common/collect.png" v-if="detail.is_collect == 1"/>
            <img src="/home/images/common/no-collect.png" v-else/>
            <p>收藏</p>
        </div>
    </div>
    <div class="box" v-show="sendBoxValid" @click.prevent.self="closeSendBox">
        <div class="send-box">
            <div class="box-body">
                <textarea placeholder="请说出你的想法" v-model="content" @focus="getFocus" @blur="loseFocus"></textarea>
                <div class="send blue" @click="send">发送</div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script>
    console.log({$detail})
    console.log({$visit})
    var vm = new Vue({
        el:'#app',
        data:{
            detail:{$detail},
            sendBoxValid:false,
            loading: false,
            loadOver: true,
            len:0,
            content:'',
            visit:{$visit},
            interval: null,
            bfscrolltop:'',
            userId: '{$userid}'
        },
        computed: {
            resizeImage() {
                return this.detail.content;
            }
        },
        mounted() {
            this.bfscrolltop = document.body.scrollTop;//获取软键盘唤起前浏览器滚动部分的高度
            var imgs = this.$refs.article.getElementsByTagName("img");
            console.log(imgs);
            for(var i in imgs) {
                if(imgs[i].naturalWidth < .5 * window.screen.width) {
                    imgs[i].style.width = '20px';
                    imgs[i].style.height = '20px';
                    imgs[i].style.margin = '2px 2px 2px 0';
                }
            }
        },
        methods:{
            getFocus() {
                this.interval = setInterval(function () {
                    document.body.scrollTop = document.body.scrollHeight;//获取焦点后将浏览器内所有内容高度赋给浏览器滚动部分高度
                }, 100)
            },
            loseFocus() {
                clearInterval(this.interval);
                document.body.scrollTop = this.bfscrolltop; //将软键盘唤起前的浏览器滚动部分高度重新赋给改变后的高度
            },
            clickSendBox() {
                this.sendBoxValid = true
            },
            closeSendBox() {
                this.sendBoxValid = false
            },
            //加载更多评论
            loadMore() {
                var _this = this;
                if(_this.len < 8){
                    return false
                }
                _this.loading = true;
                _this.loadOver = false;
                _this.$http.post('{:Url("Base/morecomment")}', {
                    'type': 1,
                    'aid':_this.detail.id,
                    'length': _this.len
                }, {emulateJSON: true}).then(function (res) {
                    var data = res.data;
                    console.log(data)
                    if(data.code == 1){
                        if (data.data.length == 8) {
                            _this.loading = false;
                        } else {
                            _this.loadOver = true;
                        }
                        for(var i in data.data){
                            _this.detail.comment.push(data.data[i]);
                        }
                        _this.len = _this.detail.comment.length;
                    }else{
                        _this.loadOver = true;
                    }
                }, function () {
                    _this.$toast({message:'加载失败，请重试！',duration:1500});
                    _this.loadOver = true;
                })
            },
            //发送评论
            send() {
                var _this = this;
                if(!_this.content){
                    _this.$toast({message:'请说些什么吧！',duration:1500});
                    return false
                }
                _this.$http.post('{:Url("Base/comment")}', {
                    'type': 1,
                    'aid':_this.detail.id,
                    'content':_this.content
                }, {emulateJSON: true}).then(function (res) {
                    var data = res.data;
                    console.log(data)
                    if(data.code == 1){
                        var obj;
                        obj={
                            'id':data.data.id,
                            'header':data.data.header,
                            'nickname':data.data.nickname,
                            'likes':data.data.likes,
                            'is_like':0,
                            'create_time':data.data.create_time,
                            'content':data.data.content
                        };
                        _this.$toast({message: '评论成功', iconClass: 'icon', duration:1500});
                        _this.detail.comment.unshift(obj);
                        _this.detail.comments ++;
                        _this.content = '';
                        this.sendBoxValid = false
                    }else{
                        _this.$toast({message:'评论失败，请重试！',duration:1500});
                    }
                }, function () {
                    _this.$toast({message:'评论失败，请重试！',duration:1500});
                })
            },
            //文章收藏
            collect(item){
                var _this = this;
                _this.$http.post('{:Url("Base/collect")}', {
                    'type': 1,
                    'aid':item.id
                }, {emulateJSON: true}).then(function (res) {
                    var data = res.data;
                    console.log(data)
                    if(data.code == 1){
                        if(item.is_collect == 0){
                            item.is_collect = 1
                            _this.$toast({message:'收藏成功',iconClass: 'icon', duration:1500});
                        }else{
                            item.is_collect = 0
                            _this.$toast({message:'取消成功',iconClass: 'icon', duration:1500});
                        }
                    }else{
                        _this.$toast({message:'网络错误，请重试',duration:1500});
                    }
                }, function () {
                    _this.$toast({message:'网络错误，请重试',duration:1500});
                })
            },
            //评论点赞
            commentLike: function(item){
                var _this = this;
                _this.$http.post('{:Url("Base/like")}', {
                    'type': 0,
                    'aid':item.id
                }, {emulateJSON: true}).then(function (res) {
                    var data = res.data;
                    console.log(data)
                    if(data.code == 1){
                        if(item.is_like == 0){
                            item.likes ++
                            item.is_like = 1
                            _this.$toast({message:'点赞成功',iconClass: 'icon', duration:1500});
                        }else{
                            item.likes --
                            item.is_like = 0
                            _this.$toast({message:'取消成功',iconClass: 'icon', duration:1500});
                        }
                    }else{
                        _this.$toast({message:'网络错误，请重试',duration:1500});
                    }
                }, function () {
                    _this.$toast({message:'网络错误，请重试',duration:1500});
                })
            },
            deleteComment(id,index) {
                var _this = this;
                _this.$messagebox.confirm('是否删除该条评论','公司发文').then(function () {
                    _this.$http.post('{:Url("Base/commentdel")}',{
                        'id': id
                    }, {emulateJSON: true}).then(function (res) {
                        var data = res.data;
                        console.log(data);
                        if(data.code == 1) {
                            _this.detail.comment.splice(index,1);
                            _this.detail.comments --;
                        }
                    });
                });
            }
        }
    })
</script>
{/block}
